<template>
    <view>

        <scroll-view v-if="record" @scrolltolower="getProduct" style="height:100vh"  scroll-y="true">
            <view class="my_content">
                <view class="my_heade">

                    <template  v-if="user.i_follow>0">
                        <view class="heade_top">
                            <view class="heade_img"  @tap="unFollow">
                                <view class="header_img">
                                    <image :src="user.avatar" class="img"></image>
                                </view>
                                <view class="name font-medium">{{user.name}}
                                    <!--<image src="/static/img/nvhai.png" class="xing_img"></image>-->
                                </view>

                            </view>

                            <view class="heade_bottom"  @tap="unFollow">
                                <button v-if="user.i_follow>0" type="default" class="pop_btn font-medium" plain="true">已关注</button>
                                <!--<button v-if="user.i_follow<1" @tap="follow" type="default" class="pop_btn  font-medium" plain="true">关注</button>-->
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="heade_top"  @tap="follow">
                            <view class="heade_img">
                                <view class="header_img">
                                    <image :src="user.avatar" class="img"></image>
                                </view>
                                <view class="name font-medium">{{user.name}}
                                    <!--<image src="/static/img/nvhai.png" class="xing_img"></image>-->
                                </view>

                            </view>

                            <view class="heade_bottom"  @tap="follow">
                                <!--<button v-if="user.i_follow>0" @tap="unFollow" type="default" class="pop_btn font-medium" plain="true">已关注</button>-->
                                <button v-if="user.i_follow<1" type="default" class="pop_btn  font-medium" plain="true">关注</button>
                            </view>
                        </view>
                    </template>


                </view>
                <view class="my_work">
                    <view class="my_work_heade">
                        <image src="/static/img/my.png" class="img"></image>
                        <view class="my_work_title font-regular">我的作品({{record.length}})</view>
                    </view>
                    <view class="work_list" v-if="record.length">
                        <view v-for="(item,key) in record" :key="key">

                            <navigator :url="'/pages/tape/record?id='+item.id" open-type="navigate"  class="list" >
                                <view class="list_img">
                                    <view class="img_box">
                                        <image :src="item.subject.images_link.origin[0]+'?x-oss-process=image/resize,m_fill,h_300,w_300'" class="img"></image>
                                    </view>

                                    <view class="icon">
                                        <!--                                <view class="sanjiao"></view>-->
                                        <text class="iconfont color_b_f">&#xe619;</text>
                                    </view>
                                </view>
                                <view class="list_content">
                                    <view class="top">
                                        <view class="titles">
                                            <view class="title font-regular">{{item.title}}</view>
                                            <view class="date font-light">{{timeToString(item.created_at_timestamp)}}</view>
                                        </view>
                                        <view class="des font-light">{{item.content}}</view>
                                    </view>
                                    <view class="bottom" >
                                        <view class="icon">
                                            <text class="iconfont color_fcb300">&#xe61d;</text>
                                            <view class="num font-regular">{{showNumber(item.playings_count)}}</view>
                                        </view>
                                        <view class="icon">
                                            <text class="iconfont color_fcb300">&#xe618;</text>
                                            <view class="num font-regular">{{showNumber(item.reviews_count)}}</view>
                                        </view>
                                        <view class="icon">
                                            <text class="iconfont color_fcb300">&#xe61e;</text>
                                            <view class="num font-regular">{{showNumber(item.likes_count+item.base_like)}}</view>
                                        </view>
                                    </view>
                                </view>

                            </navigator>
                        </view>



                    </view>

                    <view v-else>
                        <view class="font-regular" style="color:#664E37;font-size: 26upx;text-align: center;margin-top:190upx;opacity: .5">ta还没发布过作品</view>
                    </view>

                </view>
            </view>

        </scroll-view>
    </view>
</template>


<script>
  import Request from '@/utils/request.js'
  import tool from '@/utils/tool.js'
  export default {
    name: "index",
    data() {
      return {
        id: 1,
        page: 0,
        user: {},
        record: [],
        status: 0, //0 需要微信授权,  1 需要手机号登录
      }
    },
    onLoad(param){
      this.id = param.id;
      if(!this.id)
        this.id=1;
      uni.showLoading();
      this.getMyDetail();
      this.getProduct();
    },
    created: function () {

    },
    methods: {
      timeToString(val){
        return tool.timeToString(val);
      },
      showNumber(val){
        return tool.showNumber(val);
      },
      getMyDetail() {

        Request.get('/common/user/'+this.id).then((res) => {
          this.user = res.data;
          uni.setStorage({
            key:'user',
            data:res.data
          });
        })
      },

      follow(){
        Request.post('/user/follow',{target_user_id:this.id}).then((res)=>{
           this.user.i_follow=1;
        })
      },
      unFollow(){
        Request.delete('/user/follow/cancel/'+this.id).then((res)=>{
          this.user.i_follow=0;
        })
      },

      getProduct() {

        uni.showLoading();
        this.page++;
        Request.get('/tape/record/?user_id=' + this.id + '&page=' + this.page).then((res) => {
          this.record = this.record.concat( res.data );
          uni.hideLoading();
        })
      }
    }
  }
</script>


<style lang='scss'>
    .pop_btn{
        background: rgb(252,179,0) !important;
        border: none !important;
        width: 40%;
        color: white !important;
        height: 80upx;
        line-height: 80upx;

        border-radius: 80upx;
        margin: auto;
    }

    .my_content{
        width: 640upx;
        margin:  20upx auto 0;
        .my_heade{
            width: 100%;
            /*height: 329upx;*/
            border-radius: 20upx;
            margin: 0 auto;
            /*display: flex;*/
            flex-direction: column;
            .heade_top{

                width: 100%;
                height: 310upx;
                margin-bottom: 4upx;
                background-color: #fffbf0;
                /*display: flex;*/
                align-items: center;
                justify-content: space-between;
                padding:0 31upx;
                padding-top: 10upx;
                box-sizing: border-box;
                .heade_img{
                    /*display: flex;*/
                    text-align: center;
                    align-items: center;
                    .header_img{
                        text-align: center;
                        margin: auto;
                        width: 120upx;
                        height: 120upx;
                        overflow: hidden;
                        border-radius: 50%;
                        border: 4upx solid $uni-color-fcb300;
                        .img{
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .xing_img{
                        width: 20upx;
                        height: 20upx;
                        margin-left: 6upx;
                    }
                    .name{
                        color: $uni-color-fcb300;
                        padding-left: 26upx;
                        font-size: $uni-font-size-base;
                    }
                }
                .message{
                    display: flex;
                    align-items: center;
                    .img{
                        width: 40upx;
                        height: 37upx;
                    }
                    .mes{
                        padding-left: 12upx;
                        font-size: $uni-font-size-13;
                        color: $uni-color-664e37;
                        position: relative;
                        .dot{
                            width:12upx;
                            height: 12upx;
                            border-radius: 50%;
                            background-color:$uni-color-ff0000 ;
                            position: absolute;
                            top: 0upx;
                            right: -12upx;
                        }
                    }
                }
            }
            .heade_bottom{
                width: 100%;
                height: 138upx;
                display: flex;
                justify-content: space-between;
                .guan_zhu{
                    width: 318upx;
                    height: 100%;
                    background-color: #fcb300;
                }
                .fen_si{
                    width: 318upx;
                    height: 100%;
                    background-color: #fcb300;
                }
                .guan_zhu,.fen_si{
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .title{
                        font-size: $uni-font-size-13;
                        color: $uni-color-876a48;
                    }
                    .num{
                        font-size: $uni-font-size-lg;
                        color: $uni-color-664e37;
                        position: relative;
                        .dot{
                            width:12upx;
                            height: 12upx;
                            border-radius: 50%;
                            background-color:$uni-color-ff0000 ;
                            position: absolute;
                            top: 0upx;
                            right: -12upx;
                        }
                    }
                }
            }
        }
        .my_work{
            width: 640upx;
            height: auto;
            .my_work_heade{
                display: flex;
                align-items: center;
                padding: 40upx 0;
                .img{
                    width: 37upx;
                    height: 37upx;
                    margin-right:14upx;
                }
                .my_work_title{
                    font-size: $uni-font-size-base;
                    color: $uni-color-664e37;
                }
            }
            .work_list{
                .list{
                    display: flex;
                    padding-bottom: 60upx;
                    .list_img{
                        width: $uni-img-size-base;
                        height:  $uni-img-size-base;
                        position: relative;
                        .img_box{
                            width: 200upx;
                            height: 200upx;
                            border-radius: 20upx;
                            overflow: hidden;
                            box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.16);
                            .img{
                                width: 100%;
                                height: 100%;
                            }
                        }

                        .icon{
                            position: absolute;
                            top: 70upx;
                            left: 70upx;
                            z-index: 1;
                            width: 60upx;
                            height: 60upx;
                            border-radius: 50%;
                            background-color: rgba(255,255,255,0.9);
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            .color_b_f{
                                color: $uni-color-fcb300;
                                margin-right: -10upx;
                                font-size: 24upx;
                            }
                        }

                    }
                    .list_content{
                        flex: 1;
                        padding:17upx 0 17upx 30upx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .top{

                            .titles{
                                width: 100%;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                .title{
                                    width: 272upx;
                                    overflow: hidden;
                                    text-overflow:ellipsis;
                                    white-space: nowrap;
                                    font-size: $uni-font-size-base;
                                    color: $uni-color-664e37;
                                }
                                .date{

                                    font-size: $uni-font-size-sm;
                                    color: $uni-color-664e37;
                                }
                            }
                            .des{
                                width: 410upx;
                                overflow: hidden;
                                text-overflow:ellipsis;
                                white-space: nowrap;
                                font-size: 28upx;
                                color: $uni-color-876a48;
                            }
                        }
                        .bottom{
                            display: flex;
                            .icon{
                                display: flex;
                                align-items: center;
                                padding-right: 32upx;
                                .color_fcb300{
                                    position: relative;
                                    top: 2upx;
                                    color: $uni-color-fcb300;
                                    font-size: 24upx;
                                }
                                .num{
                                    position: relative;
                                    top:2upx;
                                    min-width: 60upx;
                                    text-align: center;
                                    font-size: 26upx;
                                    padding-left: 4upx;
                                    color: $uni-color-876a48;
                                }
                            }

                        }

                    }
                }
            }
        }

    }

</style>
